<template>
  <div class="reg-step__3">
    <div class="reg-title">
      <div><span class="big">4</span>工作经历</div>
      <div class="line-height-22">
        完善工作、项目经历，为简历加分～ <br />填写就近一段即可
      </div>
    </div>
    <div class="wrapper-form">
      <a-form
        :label-col="{ span: 5 }"
        size="large"
        :rules="rules"
        :model="formData"
        ref="formRef"
      >
        <div class="form-title">工作经历</div>
        <a-form-item label="公司名称" name="workExperienceDTO_companyName">
          <a-input
            size="large"
            v-model:value="formData.workExperienceDTO_companyName"
            placeholder="请输入与公司名称"
          />
        </a-form-item>
        <a-form-item label="所在行业" name="workExperienceDTO_industryCode">
          <a-tree-select
            size="large"
            v-model:value="formData.workExperienceDTO_industryCode"
            placeholder="请选择"
            :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
            :tree-data="industryList"
            allow-clear
            showSearch
            tree-default-expand-all
            treeNodeFilterProp="name"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="在职时间" name="workExperienceDTO_time">
          <a-range-picker
            v-model:value="formData.workExperienceDTO_time"
            size="large"
            style="width: 100%"
            :placeholder="['请选择在职时间']"
          />
        </a-form-item>
        <a-form-item label="职位名称" name="workExperienceDTO_positionCode">
          <a-tree-select
            size="large"
            :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
            v-model:value="formData.workExperienceDTO_positionCode"
            placeholder="请选择"
            :tree-data="posList"
            allow-clear
            showSearch
            tree-default-expand-all
            treeNodeFilterProp="name"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="工作内容" name="workExperienceDTO_description">
          <a-textarea
            size="large"
            :rows="5"
            v-model:value="formData.workExperienceDTO_description"
            placeholder="请输入工作内容"
            :maxlength="150"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="汇报上级">
          <a-input
            size="large"
            v-model:value="formData.workExperienceDTO_reportTo"
            :maxlength="10"
            placeholder="请输入"
          ></a-input>
        </a-form-item>
        <a-form-item label="带领团队人数">
          <a-input-number
            size="large"
            :min="0"
            :precision="0"
            style="width: 100%"
            placeholder="请输入"
            v-model:value="formData.workExperienceDTO_underlingNum"
          />
        </a-form-item>

        <div class="form-title mt-40">项目经历</div>
        <a-form-item label="项目名称" name="projectExperienceDTO_projectName">
          <a-input
            size="large"
            v-model:value="formData.projectExperienceDTO_projectName"
            placeholder="请输入项目名称"
          />
        </a-form-item>
        <a-form-item label="项目时间" name="projectExperienceDTO_time">
          <a-range-picker
            v-model:value="formData.projectExperienceDTO_time"
            size="large"
            style="width: 100%"
            :placeholder="['请选择项目时间']"
          />
        </a-form-item>
        <a-form-item label="担任角色" name="projectExperienceDTO_jobTitle">
          <a-input
            size="large"
            v-model:value="formData.projectExperienceDTO_jobTitle"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item label="项目描述" name="projectExperienceDTO_description">
          <a-textarea
            size="large"
            :rows="5"
            v-model:value="formData.projectExperienceDTO_description"
            :maxlength="150"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item label="项目业绩" name="projectExperienceDTO_performance">
          <a-textarea
            size="large"
            :rows="5"
            v-model:value="formData.projectExperienceDTO_performance"
            placeholder="请输入"
            :maxlength="150"
          />
        </a-form-item>
        <a-form-item label="项目链接" name="projectExperienceDTO_links">
          <a-input
            size="large"
            v-model:value="formData.projectExperienceDTO_links"
            placeholder="请输入"
          />
        </a-form-item>
      </a-form>
      <div class="btn-box">
        <a-button @click="onJump">跳 过</a-button>
        <a-button type="primary" @click="onBackClick">上一步</a-button>
        <a-button type="primary" @click="onNextClick">完成</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import CommonService from '@/api/common';
import UserService from '@/api/user';
import { array2Tree, disabledTreeData } from '@/utils/util';
import { step3Rules as rules } from '../util';
import { message } from 'ant-design-vue';
import { Storage } from '@/utils/Storage';

export default {
  emits: ['on-next', 'on-last'],
  data() {
    return {
      formData: {
        projectExperienceDTO_description: '',
        projectExperienceDTO_jobTitle: '',
        projectExperienceDTO_links: '',
        projectExperienceDTO_performance: '',
        projectExperienceDTO_projectName: '',
        projectExperienceDTO_time: [],

        workExperienceDTO_companyName: '',
        workExperienceDTO_description: '',
        workExperienceDTO_industryCode: null,
        workExperienceDTO_positionCode: null,
        workExperienceDTO_reportTo: '',
        workExperienceDTO_underlingNum: '',
        workExperienceDTO_time: [],
      },
      industryList: [],
      posList: [],
      rules,
    };
  },
  methods: {
    onJump() {
      this.$router.push('/');
    },
    async selectIndustryListFromRedis() {
      try {
        const resp = await CommonService.selectIndustryListFromRedis();
        if (resp.code === 200) {
          this.industryList = array2Tree(resp.data, '0', 'code', 'parentCode');
          disabledTreeData(this.industryList);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async selectPositionListFromRedis() {
      try {
        const resp = await CommonService.selectPositionListFromRedis();
        if (resp.code === 200) {
          this.posList = array2Tree(resp.data, '', 'code', 'parentCode');
          disabledTreeData(this.posList);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async onNextClick() {
      try {
        await this.$refs.formRef?.validate();
        const parmas = {
          projectExperienceDTO: {
            description: this.formData.projectExperienceDTO_description,
            jobTitle: this.formData.projectExperienceDTO_jobTitle,
            links: this.formData.projectExperienceDTO_links,
            performance: this.formData.projectExperienceDTO_performance,
            projectName: this.formData.projectExperienceDTO_projectName,
            startTime:
              this.formData.projectExperienceDTO_time?.[0]?.format('YYYY-MM') ||
              null,
            endTime:
              this.formData.projectExperienceDTO_time?.[1]?.format('YYYY-MM') ||
              null,
          },
          workExperienceDTO: {
            companyName: this.formData.workExperienceDTO_companyName,
            description: this.formData.workExperienceDTO_description,
            industryCode: this.formData.workExperienceDTO_industryCode,
            positionCode: this.formData.workExperienceDTO_positionCode,
            reportTo: this.formData.workExperienceDTO_reportTo,
            underlingNum: this.formData.workExperienceDTO_underlingNum,
            startTime:
              this.formData.workExperienceDTO_time?.[0]?.format('YYYY-MM') ||
              null,
            endTime:
              this.formData.workExperienceDTO_time?.[1]?.format('YYYY-MM') ||
              null,
          },
        };
        const resp = await UserService.improveProjectWorkExperience(parmas);
        if (resp.code === 200) {
          this.$router.push('/');
        } else {
          message.error(resp?.msg || '操作失败');
        }
      } catch (error) {
        console.log(error);
      }
    },
    onBackClick() {
      Storage.set('Register_2', true);
      this.$emit('on-next', 2);
    },
  },
  mounted() {
    this.selectIndustryListFromRedis();
    this.selectPositionListFromRedis();
  },
};
</script>

<style lang="scss" scoped>
.reg-step__3 {
  box-sizing: border-box;
  padding: 0 302px 103px 278px;

  .line-height-22 {
    line-height: 22px !important;
    padding-left: 26px !important;
  }
  .wrapper-form {
    .form-title {
      padding-left: 26px;
      box-sizing: border-box;
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      &.mt-40 {
        margin-top: 40px;
      }
    }
  }
  .btn-box {
    text-align: center;
    margin-top: 20px;
    :deep(.ant-btn) {
      &:nth-child(1) {
        width: 140px;
        margin-left: 120px;
        margin-right: 10px;
        color: #1890ff;
        border-color: #1890ff;
      }
      &:nth-child(2) {
        width: 140px;
        margin-right: 10px;
        background-color: #1890ff;
        border-color: #1890ff;
      }
      &:nth-child(3) {
        width: 140px;
        background-color: #1890ff;
        border-color: #1890ff;
      }
    }
  }
}
</style>
